<template>
	<view class="container">
		<!-- 顶部定位和搜索栏 -->
		<view class="header">
			<view class="search-box">
				<uni-icons type="search" size="18" color="#999"></uni-icons>
				<input class="search-input" @blur="do_search"  v-model="searchKeyword" placeholder="请输入搜索关键词" confirm-type="search" />
			</view>
			<view class="location">
				<uni-icons type="location" size="20"></uni-icons>
				<text class="city">{{seele.page_sights_location_city}}</text>
			    <uni-icons type="down"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		computed: {...mapState(['seele'])},
		data() {
			return {
				city: '哈尔滨', // 当前城市
				searchKeyword: '' // 搜索关键词
			};
		},
		created(){
			this.$store.dispatch('seele/freshLocation','游玩景点');
			this.$store.dispatch('seele/loadSightsList',true);
		},
		methods: {
			do_search(){
				console.log('启动查询')
				this.$store.commit('seele/setSightsSearchKeywords',this.searchKeyword);
				this.$store.dispatch('seele/loadSightsList',true);
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20rpx;
	}

	.header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.location {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.city {
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.search-box {
		flex: 1;
		background: #ffffff;
		border-radius: 15rpx;
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		margin-left: 10rpx;
		height: 60rpx;
	}
</style>